<template>
  <div>
    <div class="article" width="100%" >
      <div class="article-lists">
        <div class="lists" v-for="(item,index) in list" :key="index" @click="jump_detail(item.id)">
          <img :src="item.pic" alt />
          <p v-html="item.title"></p>
          <br>
          <span>{{item.descript}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.$network
      .getDetails()
      .then(res => {
        //检测
        // console.log(res.data.data);
        //赋值
        this.list = res.data.data;
      })
      .catch(error => {
        console.log(error);
      });

  },
  methods: {
    jump_detail(id){
      this.$router.push({
        path:'/articleDetails',
        query:{
          id
        }
      })
    }
  },
};
</script>
<style>
.article {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* border: 1px solid blue; */
}
.article-lists {
  width: 300%;
  height: 5.3rem;
  /* border: 1px solid gary; */
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}
.article-lists img {
  width: 5.6rem;
  height: 3.4rem;
  border-radius: 5%;
}
.lists {
  width: 6rem;
  height: 4.2rem;
  /* border: 1px solid red; */
  padding: 0.08rem;

}
.lists p{
    margin-top: 0.1rem;
}
.lists span {
  display: inline-block;
  width: 5.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.17rem;
  color: gray;
}
</style>